<template>
  <el-form ref="loginForm" :model="loginUser" :rules="rules" label-width="100px" class="loginForm sign-in-form">
    <div @keyup.enter="userLoginEnter">
      <h3>Sky后台管理系统登录</h3>
      <div v-if="isImageSlideVerify">
        <image-slide-verify @slideVerifyResult="slideVerifyResult" />
      </div>
      <div v-else>
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginUser.username" placeholder="请输入账号">
            <svg-icon icon-class="user" slot="prefix" />
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input id="pwd" v-model="loginUser.password" type="password" placeholder="请输入密码">
            <svg-icon icon-class="pwd" slot="prefix" />
            <svg-icon icon-class="no_eye" slot="suffix" v-if="isEyeShow" @click="eyeClick" />
            <svg-icon icon-class="eye" slot="suffix" v-else @click="eyeClick" />
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="handleLogin('loginForm')" type="primary" class="submit-btn">提交</el-button>
        </el-form-item>
        <!-- 找回密码 -->
        <div class="tiparea">
          <p>忘记密码？ <a>立即找回</a></p>
        </div>
      </div>
    </div>
  </el-form>
</template>

<script>
import ImageSlideVerify from "../../components/common/ImageSlideVerify.vue";
import { usernameLogin } from '@/api/system/registerLoginApi';
import { getLoginUserInfo } from '@/api/system/userApi'
export default {
  components: { ImageSlideVerify },
  props: {
    loginUser: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      token: "",
      isImageSlideVerify: false,
      isEyeShow: true,
    };
  },
  methods: {
    //处理登录按钮
    handleLogin() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          //认证账号完成先保存Token信息到当前对象,代验证码校验成功后存储到游览器仓库中
          usernameLogin(this.loginUser.username, this.loginUser.password)
            .then(data => {
              this.token = data;//保存Token
              this.isImageSlideVerify = true;//打开滑块验证码
            }).catch(err => {
              this.$message.error(err);
            })
        } else {
          return false;
        }
      });
    },
    //划动登录的图片验证成功,保存Token到游览器仓库中并跳转至首页
    async slideVerifyResult(slideSercret) {
      if (slideSercret) {
        this.$store.dispatch('user/UPDATE_TOKEN', this.token);
        this.$message.success("登录成功");
        let registerState = "AUDIT_SUCCESS";
        //获取用户登录信息
        await getLoginUserInfo().then(data => {
          this.$store.dispatch('user/UPDATE_LOGIN_INFO', data);
          registerState = data.registerState;
        }).catch(err => {
          this.$message(err);
        })
        if(registerState !== "AUDIT_SUCCESS"){
          this.$router.push({ path: '/register' });
        }else{
          this.$router.push({ path: '/index' });
        }
      }
    },
    //Enter键登录处理
    userLoginEnter() {
      this.handleLogin();
    },
    //眼睛控制
    eyeClick() {
      this.isEyeShow = !this.isEyeShow;
      let pwdInput = document.querySelector("#pwd");
      pwdInput.type = this.isEyeShow ? "password" : "text";
    },
  },
};
</script>

<style scoped lang="scss">
.loginForm {
  margin-top: 80px;
  background-color: #fff;
  padding: 60px 80px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit-btn {
  width: 100%;
}

.tiparea {
  text-align: right;
  font-size: 12px;
  color: #333;
}

.tiparea p a {
  color: #409eff;
}

h3 {
  position: relative;
  bottom: 30px;
  text-align: center;
  font-size: 18px;
  background-image: linear-gradient(135deg, #1d131f, #409eff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 1px 1px 3px rgb(128, 128, 128);
}
</style>
